<script setup lang="ts">
import type { IOptions } from '#/api/system';

import { reactive, ref } from 'vue';

import { ElMessage } from 'element-plus';

import { reqSetSymbol, reqSymbol } from '#/api/system';

const form: {
  symbolList: IOptions[];
} = reactive({ symbolList: [] });
const symbolOptions = ref<IOptions[]>([]);
const binanceSelected = ref<IOptions[]>([]);
const bybitSelected = ref<IOptions[]>([]);
const okxSelected = ref<IOptions[]>([]);

const getSymbols = async () => {
  const result = await reqSymbol();
  // 1. 赋值 下拉 options
  symbolOptions.value = result.list;
  // 2. 根据选中的symbol，去重后
  let temp_result: any[] = [];
  Object.keys(result.select).forEach((item: string) => {
    temp_result.push(...result.select[item]);
  });
  temp_result = [
    ...new Map(temp_result.map((item) => [item.name, item])).values(),
  ].map((item) => item.name);
  // 3. 得到选中的 option 的name,  去options里 根据 name 筛选出来 对象的 option
  const selected_options = result.list.filter((item: any) =>
    temp_result.includes(item.name),
  );
  form.symbolList = selected_options;
  // 4. 同步左侧交易所中选中的选项
  handleSelectChange(form.symbolList);
};

const setSupportSymbol = async () => {
  try {
    await reqSetSymbol({ lists: form.symbolList });
    ElMessage({
      message: '操作成功',
      type: 'success',
    });
  } catch (error: any) {
    ElMessage({
      message: `操作失败: ${error.message}`,
      type: 'error',
    });
  }
};
const filteroptionsByPlatform = (
  platformName: string,
  checkedOptions: IOptions[],
) => {
  return checkedOptions.filter((item: IOptions) =>
    item.platform!.includes(platformName),
  );
};
const handleSelectChange = (value: IOptions[]) => {
  binanceSelected.value = filteroptionsByPlatform('BinanceSwap', value);
  bybitSelected.value = filteroptionsByPlatform('BybitLinear', value);
  okxSelected.value = filteroptionsByPlatform('OkxSwap', value);
};

getSymbols();

const handleClose = (curItem: IOptions) => {
  form.symbolList = form.symbolList.filter(
    (item: IOptions) => item.id !== curItem.id,
  );
  handleSelectChange(form.symbolList);
};

const onSubmit = () => {
  setSupportSymbol();
};
</script>

<template>
  <el-card>
    <div class="flex justify-between gap-3">
      <div class="flex-1">
        <div class="pb-5">自选设置</div>

        <el-form :inline="true" :model="form" class="form-inline">
          <el-form-item>
            <el-select
              v-model="form.symbolList"
              placeholder=""
              clearable
              multiple
              collapse-tags
              filterable
              value-key="id"
              collapse-tags-tooltip
              @change="handleSelectChange"
            >
              <el-option
                v-for="item in symbolOptions"
                :key="item.id"
                :label="item.name"
                :value="item"
                class="flex items-center justify-between"
              >
                <span style="float: left">{{ item.name }}</span>
                <span
                  style="
                    float: right;
                    font-size: 13px;
                    color: var(--el-text-color-secondary);
                  "
                >
                  <el-tag class="mx-1" v-for="p in item.platform" :key="p">
                    {{ p }}
                  </el-tag>
                </span>
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="flex-1">
        <div class="pb-5">BinanceSwap</div>
        <div class="border p-2">
          <el-scrollbar height="520px">
            <div v-for="item in binanceSelected" :key="item.name" class="mb-2">
              <el-tag closable @close="handleClose(item)">
                {{ item.name }}
              </el-tag>
            </div>
          </el-scrollbar>
        </div>
      </div>

      <div class="flex-1">
        <div class="pb-5">BybitLiner</div>
        <div class="border p-2">
          <el-scrollbar height="520px">
            <div v-for="item in bybitSelected" :key="item.name" class="mb-2">
              <el-tag closable @close="handleClose(item)">
                {{ item.name }}
              </el-tag>
            </div>
          </el-scrollbar>
        </div>
      </div>

      <div class="flex-1">
        <div class="pb-5">OkxSwap</div>
        <div class="border p-2">
          <el-scrollbar height="520px">
            <div v-for="item in okxSelected" :key="item.name" class="mb-2">
              <el-tag closable @close="handleClose(item)">
                {{ item.name }}
              </el-tag>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </el-card>
</template>
<style scoped lang="scss">
.form-inline {
  .el-select {
    --el-select-width: 220px;
  }
}
</style>
